.user-info-div{
  .gutter-col{
    margin-bottom: 24px;
    .gutter-box{
      background: #ffffff;
      padding: 24px;
      box-shadow: 0 0 20px rgba(211,211,211,.3);
      height: 102px;
      .icon{
        font-size: 54px;
        float: left;
      }
      .card{
        padding-left: 70px;
        p{
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          padding: 0;
        }
        .title{
          line-height: 16px;
          font-size: 16px;
          margin-bottom: 8px;
        }
        .number{
          line-height: 30px;
          font-size: 24px;
          margin: 0 auto;
        }
      }
    }

    .echars-div{
      height: 340px;
      background: #ffffff;
      padding: 20px;
      .echars-title{
        text-align: center;
        padding: 10px;
      }
      .avatar-card{
        height: 60px;
        display: table;
        div{
          display: table-cell;
          vertical-align: middle;
          img{
            height: 60px;
            width: 60px;
            border-radius: 10px;
            float: left;
          }
        }
        .user-info{
          padding-left: 10px;
          p{
            padding: 0;
            margin: 0 auto;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          p:nth-child(1){
            font-size: 16px;
            font-weight: bold;
            color: #000000;
          }
          p:nth-child(2){
            color: #44d2d2;
          }

        }

      }
      .info-card{
        margin: 10px;
        font-size: 12px;
        div{
          margin: 4px;
          color: #44d2d2;
          font-size: 14px;
          span{
            padding-right: 10px;
          }
        }
        .title{
          font-weight: bold;
          color: #000;
        }
      }
    }
  }
}

.setting{
  max-width: 600px;
}